<template>
    <div class = "journal">
    <div class="journal-body">
      <div class="journal-header">
        <input v-model="diary.diaryName"/>
        <!-- placeholder="YOUR JOURNAL"  -->
      </div>
      <div v-if="place" class="journal-entry">
        <div class="images-container">
          <img :src="image" alt="地点照片"  class = "image" style="width: 264px;height: 400px;">
        </div>
        <div class="text">
          <h2 class = "title">{{ place?.placeName }}</h2>
          <p class = "date">Date: {{ formatDate(place?.visitTime)}}</p>
          <p class = "des">{{ place?.description }}</p>
          <div v-if="tags && tags.length > 0" class = "tags">
            <p class ="tag">{{ tags[0].tagName }} | {{ getMoodIcon(tags[0].moodName) }}</p> 
            <p class ="tag">{{ tags[1].tagName }} | {{ getMoodIcon(tags[1].moodName) }}</p>
          </div>
          <div v-else>
            标签加载中...
          </div>
        </div>
      </div>
      <div v-else>
        加载中...
      </div>
      <div class="button-container">
        <button @click="goToOverview" class="button">返回总览</button>
    </div>
    </div>
    </div>
  </template>
  
  
  <script>
  import router from "@/router";
import axios from "axios";
  
  export default {
    props: ['diaryId'],
    data() {
      return {
        place: null,
        tags: null,
        image: null,
        emoticons: {
          '😄': '开心',
          '😢': '伤心',
          '😡': '愤怒',
          '😪': '沮丧',
          '🥱': '疲倦',
        },
        diary: {
          diaryName: '',
          userId: '',
          complete: ''
        }
      }
    },
    async mounted() {
      const placeId = await this.fetchPlaceId();
      console.log('Received placeId:', placeId);
      if (placeId) {
        await this.loadData(placeId);
        await this.fetchTags(placeId);
        await this.fetchImages(placeId);
      } else {
        console.error("Failed to fetch placeId, cannot load other data.");
      }
    },
    methods: {
      async loadData(placeId) {
        console.log('Fetching data for placeId:', placeId);
        const token = localStorage.getItem('userToken');
        try {
          const response = await axios.get(`/api/places/find`, {
            headers: { 'Authorization': token },
            params: { placeId: placeId }
          });
          this.place = response.data.data;
        } catch (error) {
          console.error('Error loading data:', error);
          this.place = null;
        }
      },
      formatDate(value) {
        if (!value) return '';
        return value.split('T')[0];
      },
      async fetchTags(placeId) {
        console.log(`Fetching tags for placeId: ${placeId}`);
        try {
          const response = await axios.get(`/api/moods/getplacemood`, {
            params: { placeId: placeId }
          });
          this.tags = response.data.data;
          console.log('Tags fetched successfully:', this.tags);
        } catch (error) {
          console.error('Error fetching tags:', error);
          alert('加载标签数据失败，请稍后再试');
        }
      },
      async fetchImages(placeId) {
        try {
          const response = await axios.get('/api/images/byPlaceId', {
            params: { placeId: placeId }
          });
          this.image = response.data.data[0].imageUrl;
        } catch (error) {
          console.error('Error loading images:', error);
          alert("加载图片数据失败，再试一次");
        }
      },
      getMoodIcon(moodName) {
        switch (moodName) {
          case '开心': return '😀';
          case '伤心': return '😢';
          case '愤怒': return '😡';
          case '沮丧': return '😪';
          case '疲倦': return '🥱';
          default: return moodName;
        }
      },
      async fetchPlaceId() {
        const token = localStorage.getItem('userToken');
        try {
          const response = await axios.get('/api/diarys/getPlaceId', {
            headers: { 'Authorization': token },
            params: { diaryId: this.diaryId }
          });
          return response.data.data;
        } catch (error) {
          console.error('Error fetching place ID:', error);
          return null;
        }
      },
      goToOverview(){
        router.push('/overview');
      }
    }
  }
  </script>
  
  
  <style>
  @import "@/assets//css/jounal1.css";
  </style>